<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>findYou - search</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../mycss/mysearch.css">
    <script type="text/javascript" src="../myjs/jquery-1.8.3.min.js"></script>

    <!--加载更多  瀑布流css-->
    <link rel="stylesheet" type="text/css" href="../mycss/mywaterfall.css">
    <link rel="stylesheet" type="text/css" href="../mycss/base.css">
    <link rel="stylesheet" type="text/css" href="../mycss/index.css">
    <!--[if lt IE 9]>
    <script src="../myjs/css3-mediaqueries.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../myjs/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../myjs/jQueryColor.js"></script>
    <!--这个插件是瀑布流主插件函数必须-->
    <script type="text/javascript" src="../myjs/jquery.masonry.min.js"></script>
    <!--这个插件只是为了扩展jquery的animate函数动态效果可有可无-->
    <script type="text/javascript" src="../myjs/jQeasing.js"></script>
    <%-------end 加载更多  瀑布流css######################-------------%>

</head>


<body >

<%--头部-------------------------------------%>
<div id="unauth_callout" class="unauth_callout">

    <div id="flage1"  class="wrapper clearfix" style="width: 1496px;">
        <div class="intro">
            <div class="title">国内最优质3D建模展示</div>
            <div>已有数百万的优质图片。</div>
            <div style="display: none" class="more"><span>更多相似内容：</span><a>潮品</a><a>当季流行</a></div>
        </div>

        <div class="login">
            <a href="https://www.baidu.com/" onclick="return false;" rel="nofollow"  class="weibo"></a><a href="/oauth/qzone/instant_login/?_ref=bar" onclick="return false;" rel="nofollow" class="qzone"></a>
            <a href="https://www.baidu.com/" onclick="return false;" title="豆瓣帐号登录" rel="nofollow" class="douban"></a>
            <a href="https://www.baidu.com/" onclick="return false;" title="人人帐号登录" rel="nofollow" style="margin-right: 0" class="renren"></a>
            <div class="with-line">用以上社交帐号直接登录</div>
        </div>
    </div>
</div>

<%--悬浮 隐藏层--%>
<div   id="flage2"  style=" display: none;  top: 0px; left: 0px;" class="floating">
    <%--<div style="display: none; top: 48px; left: 0px;" class="floating">--%>
    <div class="wrapper clearfix" style="width: 1496px;">
        <div class="title">国内最优质图片灵感库</div>
        <div class="sub-title">已有数百万出众网友，用花瓣保存喜欢的图片。</div>

        <div class="floating-login">
            <span class="words">用社交帐号直接登录：</span>
            <a  href="https://www.baidu.com/" onclick="return false;" rel="nofollow"  class="weibo"></a>
            <a href="https://www.baidu.com/" onclick="return false;"   rel="nofollow" class="qzone"></a>
            <a  href="https://www.baidu.com/" onclick="return false;" title="豆瓣帐号登录"  rel="nofollow" class="douban"></a>
            <a href="https://www.baidu.com/"   onclick="return false;" title="人人帐号登录" rel="nofollow"   style="margin-right: 0" class="renren"></a>
        </div>

    </div>
</div>
<%--end 悬浮 隐藏层--%>
<%--end 头部-------------------------------------%>


<%--搜索区域、展示类别区域--%>
<div class="search-group">
    <form id="search_result_form" action="/search/boards/?q=%E8%8D%B7%E8%8A%B1" class="search-item long_form"  data-regestered="regestered">
        <input value="科比" name="q" placeholder="搜索你喜欢的" autocomplete="off" class="clear-input">
        <a onclick="return false;" class="go">  </a>
    </form>

    <div class="search-hint"></div>
    <div class="search-type">
        <div id="search_switch" class="tabs">
            <%--<a href="/search/?q=荷花" class="switch-pin tab">31090 采集</a>--%>
            <a class="switch-board tab active" target="_blank">500 图片</a>
            <a href="/search/people/?q=科比" class="switch-people tab" target="_blank">100  用户</a>
        </div>

    </div>
</div>
<%--end 搜索区域、展示类别区域--%>

<%--瀑布流 --%>
<div class="content">
    <!-- 瀑布流样式开始 -->
    <div class="waterfull clearfloat" id="waterfull">
        <ul>
            <%--第一列--%>
            <li class="item">
                <a href="####" class="a-img">
                    <img src= ../myimg/p1.jpg alt="">
                </a>

                <h2 class="li-title" title="abc">abc)</h2>
                <p class="description"> abc.</p>
                <div class="qianm clearfloat">
                    <span class="sp1"><b>688</b>浏览</span>
                    <span class="sp2">志强不息</span>
                    <span class="sp3">2小时前&nbsp;By</span>
                </div>
            </li>


                <%--第2列--%>
            <li class="item">
                <a href="####" class="a-img">
                    <img src= ../myimg/p1.jpg alt="">


                </a>
                <h2 class="li-title" title="abc">abc</h2>
                <p class="description">abc.</p>
                <div class="qianm clearfloat">
                    <span class="sp1"><b>688</b>浏览</span>
                    <span class="sp2">志强不息</span>
                    <span class="sp3">2小时前&nbsp;By</span>
                </div>
            </li>
                <li class="item">
                    <a href="####" class="a-img">
                        <img src= ../myimg/p1.jpg alt="">


                    </a>
                    <h2 class="li-title" title="abc">abc</h2>
                    <p class="description">abc.</p>
                    <div class="qianm clearfloat">
                        <span class="sp1"><b>688</b>浏览</span>
                        <span class="sp2">志强不息</span>
                        <span class="sp3">2小时前&nbsp;By</span>
                    </div>
                </li>
                <li class="item">
                    <a href="####" class="a-img">
                        <img src= ../myimg/p1.jpg alt="">


                    </a>
                    <h2 class="li-title" title="abc">abc</h2>
                    <p class="description">abc.</p>
                    <div class="qianm clearfloat">
                        <span class="sp1"><b>688</b>浏览</span>
                        <span class="sp2">志强不息</span>
                        <span class="sp3">2小时前&nbsp;By</span>
                    </div>
                </li>
                <li class="item">
                    <a href="####" class="a-img">
                        <img src= ../myimg/p1.jpg alt="">


                    </a>
                    <h2 class="li-title" title="abc">abc</h2>
                    <p class="description">abc.</p>
                    <div class="qianm clearfloat">
                        <span class="sp1"><b>688</b>浏览</span>
                        <span class="sp2">志强不息</span>
                        <span class="sp3">2小时前&nbsp;By</span>
                    </div>
                </li>
                <li class="item">
                    <a href="####" class="a-img">
                        <img src= ../myimg/p1.jpg alt="">


                    </a>
                    <h2 class="li-title" title="abc">abc</h2>
                    <p class="description">abc.</p>
                    <div class="qianm clearfloat">
                        <span class="sp1"><b>688</b>浏览</span>
                        <span class="sp2">志强不息</span>
                        <span class="sp3">2小时前&nbsp;By</span>
                    </div>
                </li>

            <%--第3列--%>
            <li class="item">
                <a href="####" class="a-img">
                    <img src= ../myimg/p1.jpg alt="">

                </a>
                <h2 class="li-title" title="abc)">abc)</h2>
                <p class="description">abc</p>
                <div class="qianm clearfloat">
                    <span class="sp1"><b>688</b>浏览</span>
                    <span class="sp2">志强不息</span>
                    <span class="sp3">2小时前&nbsp;By</span>
                </div>
            </li>

            <%--第4列--%>
            <li class="item">
                <a href="####" class="a-img">
                    <img src= ../myimg/p1.jpg alt="">


                </a>
                <h2 class="li-title" title="abc">abc</h2>
                <p class="description">abc.</p>
                <div class="qianm clearfloat">
                    <span class="sp1"><b>688</b>浏览</span>
                    <span class="sp2">志强不息</span>
                    <span class="sp3">2小时前&nbsp;By</span>
                </div>
            </li>

           <%--第5列--%>
            <li class="item">
                <a href="####" class="a-img">
                    <img src= ../myimg/p1.jpg alt="">


                </a>
                <h2 class="li-title" title="abc)">abc)</h2>
                <p class="description">abc...</p>
                <div class="qianm clearfloat">
                    <span class="sp1"><b>688</b>浏览</span>
                    <span class="sp2">志强不息</span>
                    <span class="sp3">2小时前&nbsp;By</span>
                </div>
            </li>
        </ul>


    </div>
    <!-- loading按钮自己通过样式调整 -->
    <div id="imloading" style="width:150px;height:30px;line-height:30px;font-size:16px;text-align:center;border-radius:3px;opacity:0.7;background:#000;margin:10px auto 30px;color:#fff;display:none">
       正在加载.....
    </div>
</div>

<%--end瀑布流 --%>



<%--加载更多、瀑布流--%>
<script type="text/javascript">
    /*
     抛开瀑布流布局各种乱七八糟的算法，基于masonry的瀑布流，很是简单的，而且通过扩展animate,能实现瀑布流布局的晃动、弹球等效果。
     masonry还有很多参数我这里注解了常用的参数
     */
    $(function(){
        /*瀑布流开始*/
        var container = $('.waterfull ul');
        var loading=$('#imloading');
        // 初始化loading状态
        loading.data("on",true);
        /*判断瀑布流最大布局宽度，最大为1280*/
        function tores(){
            var tmpWid=$(window).width();

            //去掉这个判断 就触发不了自动加载 。原因 还没明白。
//            if(tmpWid>1280  ){
//                tmpWid=1280;
//            }else{
                var column=Math.floor(tmpWid/320);
                tmpWid=column*320;
//            }
            $('.waterfull').width(tmpWid);
        }
        tores();
        $(window).resize(function(){
            tores();
        });
        container.imagesLoaded(function(){
            container.masonry({
                columnWidth: 320,
                itemSelector : '.item',
                isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
                isAnimated: true,//是否采用jquery动画进行重拍版
                isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
                isResizable: true,//是否自动布局默认true
                animationOptions: {
                    duration: 800,
                    easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
                    queue: false//是否队列，从一点填充瀑布流
                }
            });
        });
        /*模拟从后台获取到的数据*/
        var sqlJson = [{
            'title': '瀑布流其实就是几个函数的事！',
            'intro': '爆料，苏亚雷斯又咬人啦，C罗哪有内马尔帅，梅西今年要不夺冠，你就去泰国吧，老子买了阿根廷赢得彩票，输了就去不成了。',
            'src': '../myimg/p1.jpg',
            'writer': '志强不息',
            'date': '2小时前',
            'looked': 321
        }, {
            'title': '瀑布流其实就是几个函数的事！',
            'intro': '爆料了，苏亚雷斯又咬人啦，C罗哪有内马尔帅，梅西今年要不夺冠，你就去泰国吧，老子买了阿根廷赢得彩票，输了就去不成了。',
            'src': '../myimg/p1.jpg',
            'writer': '志强不息',
            'date': '2小时前',
            'looked': 321
        }, {
            'title': '瀑布流其实就是几个函数的事！',
            'intro': '爆料了，苏亚雷斯又咬人啦，C罗哪有内马尔帅，梅西今年要不夺冠，你就去泰国吧，老子买了阿根廷赢得彩票，输了就去不成了。',
            'src': '../myimg/p1.jpg',
            'writer': '志强不息',
            'date': '2小时前',
            'looked': 321
        }, {
            'title': '瀑布流其实就是几个函数的事！',
            'intro': '爆料了，苏亚雷斯又咬人啦，C罗哪有内马尔帅，梅西今年要不夺冠，你就去泰国吧，老子买了阿根廷赢得彩票，输了就去不成了。',
            'src': '../../myimg/p1.jpg',
            'writer': '志强不息',
            'date': '2小时前',
            'looked': 321
        }];
        /*本应该通过ajax从后台请求过来类似sqljson的数据然后，便利，进行填充，这里我们用sqlJson来模拟一下数据*/
        $(window).scroll(function(){
            if(!loading.data("on")) return;



            // 计算所有瀑布流块中距离顶部最大，进而在滚动条滚动时，来进行ajax请求，方法很多这里只列举最简单一种，最易理解一种
            var itemNum=$('#waterfull').find('.item').length;
            var itemArr=[];
            itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
            itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
            itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
            var maxTop=Math.max.apply(null,itemArr);
            if(maxTop<$(window).height()+$(document).scrollTop()){
                //加载更多数据
                loading.data("on",false).fadeIn(800);
                (function(sqlJson){
                    /*这里会根据后台返回的数据来判断是否你进行分页或者数据加载完毕这里假设大于30就不在加载数据*/
                    if(itemNum>500){
                        loading.text('就有这么多了！');
                    }else{
                        var html="";
                        for(var i in sqlJson){
                            html+="<li class='item'><a href='####' class='a-img'><img src='"+sqlJson[i].src+"'></a>";
                            html+="<h2 class='li-title'>"+sqlJson[i].title+"</h2>";
                            html+="<p class='description'>"+sqlJson[i].intro+"</p><div class='qianm clearfloat'>";
                            html+="<span class='sp1'><b>"+sqlJson[i].looked+"</b>浏览</span>";
                            html+="<span class='sp2'>"+sqlJson[i].writer+"</span><span class='sp3'>"+sqlJson[i].date+"&nbsp;By</span></div></li>";
                        }
                        /*模拟ajax请求数据时延时800毫秒*/
                        var time=setTimeout(function(){
                            $(html).find('img').each(function(index){
                                loadImage($(this).attr('src'));
                            })
                            var $newElems = $(html).css({ opacity: 0}).appendTo(container);
                            $newElems.imagesLoaded(function(){
                                $newElems.animate({ opacity: 1},800);
                                container.masonry( 'appended', $newElems,true);
                                loading.data("on",true).fadeOut();
                                clearTimeout(time);
                            });
                        },800 *0)
                    }
                })(sqlJson);
            }
        });
        function loadImage(url) {
            var img = new Image();
            //创建一个Image对象，实现图片的预下载
            img.src = url;
            if (img.complete) {
                return img.src;
            }
            img.onload = function () {
                return img.src;
            };
        };
//        loadImage('../images/one.jpeg',test());
        /*item hover效果*/
        var rbgB=['#8BD38B','#8BD38B','#8BD38B','#8BD38B'];
        $('#waterfull').on('mouseover','.item',function(){
            var random=Math.floor(Math.random() * 4);
            $(this).stop(true).animate({'backgroundColor':rbgB[random]},1000);
        });
        $('#waterfull').on('mouseout','.item',function(){
            $(this).stop(true).animate({'backgroundColor':'#fff'},1000);
        });
    })
</script>
<%--end 加载更多、瀑布流--%>




<script>
var $win = $(window);
var itemOffsetTop = $("#unauth_callout").offset().top;
var itemOuterHeight = $("#unauth_callout").outerHeight();
var winHeight = $win.height();
$win.scroll(function () {
    var winScrollTop = $win.scrollTop();
    if(!(winScrollTop > itemOffsetTop+itemOuterHeight) && !(winScrollTop < itemOffsetTop-winHeight)) {
        $("#flage2").css('display','none');
    } else {
        $("#flage2").css('display','block');
    }
})


</script>

<%--搜索框-------------------------------------%>



<%--end搜索框-------------------------------------%>

</body>
</html>
